<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称:{{ item.title }}
                </b>
                --------
                <b>
                    价格: {{ item.price }}
                </b>
                --------
                <b>
                    库存:{{ item.inventory }}
                </b>
                <button :disabled="item.inventory === 0" @click="addCart(item)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
import { mapActions, mapState } from "vuex"
//引入axios 
import axios from "axios"
export default {
    methods: {
        addCart(current) {
            //current 点击按钮选中的这条数据
            console.log(current)
            this.ADD_CART(current)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart', ['ADD_CART'])
    },
    computed: {
        ...mapState('product', ['productData'])
    },
    mounted() {
        this.FETCH_PRODUCT()
    },
    created() {
        axios.get("/api/data/index.json", {
            headers: {},
            params: {
                name: "lilei"
            }
        })
            .then(res => {
                console.log(res)
            })
    }
}
</script>